<script>
import {computed, defineComponent, onMounted, reactive, ref, watch,inject} from "vue";

export default defineComponent({
    name: 'WordStudy3',
    props: ['message'],
    setup(props){
        //defineProps只能放在setup中.放在onMount出错
        const message = props.message;
        // console.log('mes',message);
        const options = reactive([]);
        const rightRootShow = ref(false);
        const rightOption = ref({});
        const root_word = ref('');
        const word = ref('');
        const icon_right = inject('icons_right')
        onMounted(()=>{
            console.log('mes3',message)
            word.value = message['word'];
            root_word.value = message['root_word'];
            options.push(...message['options']);
            options.push(message['right_option']);
            rightOption.value = message['right_option'];
            options.sort(() => Math.random() - 0.5);
        })
        

        function handleOptions(index){
            const targetIndex = options.findIndex((element)=>element.definition === rightOption.value.definition && element.part_of_speech === rightOption.value.part_of_speech);
            [0,1,2,3].forEach(item => {
              document.getElementById(`button-${item}`).setAttribute('disabled','disabled')
            })
            if(index === targetIndex){
                document.getElementById(`button-${index}`).classList.add('green-bgcolor','button-disabled')
                // for (let i=0;i<icon_right.value.length;i++){
                //   if (!icon_right.value[i]){
                //     icon_right.value[i] = true;
                //     break;
                //   }
                // }
                this.$emit('option-accept',1);
                // console.log(icon_right)

            }else{
                document.getElementById(`button-${index}`).classList.add('red-bgcolor','button-disabled')
                document.getElementById(`button-${targetIndex}`).classList.add('green-bgcolor','button-disabled')
                // for (let i=0;i<icon_right.value.length;i++){
                //     if (icon_right.value[i]){
                //       icon_right.value[i] = false;
                //     }
                // }
                this.$emit('option-error')
                this.$emit('optionclick');
            }
            
        }
        return{
            handleOptions,
            options,
            root_word,
            word,
            icon_right
        }
        

    }
})
</script>
<template>
    <!-- 做题页 -->
    <div id="appCapsule">
      <div class="card no_bgcolor">
          <div class="card-header justify-content-center border-bottom-0">
              <h1 class="font-weight-600 my-3 text-center word-area">{{word}}</h1>
          </div>
          <div class="appBottomMenu flex-column no_bgcolor">
            <button
              v-for="(option, index) in options"
              :key="index"
              :id="'button-' + index"
              type="button"
              class="btn diy-button item"
              @click="handleOptions(index)"
            >
              <span class="button_partOfSpeech">{{ option.part_of_speech }}</span>
              <span class="button_definition">{{ option.definition }}</span>
            </button>
          </div>

      </div>
    </div>
</template>

<style lang="scss" scoped>
.appBottomMenu{
  border-top: none;
}

body:not(.dark-mode) {
  .appBottomMenu span {
    color: black;
  }
  .word-area{
    font-size: 45px;
    width:100%;
    padding: 3rem 1rem;
  }
}
body.dark-mode {
  .appBottomMenu span{
    color: #fff;
  }
  .word-area{
    font-size: 45px;
    width:100%;
    padding: 3rem 1rem;
    color: #fff;
  }
}

.no_bgcolor{
  background: none;
}

#appCapsule{
  height: 100vh;
  padding-bottom: 0;
}
.card{
  height: 100%;
}

//这里两个important是为了防止被bootstrap自带样式覆盖
.green-bgcolor{
  background-color: #1DCC70 !important;
  border-width: 2px;
}
.red-bgcolor{
  background-color: #F6672E !important;
  border-width: 2px;
}

.flexCenter{
  display: flex;
  justify-content: center;
  align-items: center;
}
.diy-button{
  width: 90%;
  display: flex;
  height: 4.5rem;
  justify-content: space-around;
  margin: 0 auto 1rem;
  border-width: 1px;
  border-color: rgba(192, 192, 192, 0.6);
  background-color: rgba(255, 255, 255, .1);
  box-shadow: 0 2px 4px rgba(128, 128, 128, .8) !important;
}
.button_partOfSpeech{
  font-size: large;
  font-weight: 700;
  display: flex;
  max-width: 20%;
  width: auto;
}
.button_definition{
  font: 400 20px '微软雅黑';
  color: black;
  display: flex;
  text-align: center;
  max-width: 80%;
  width: auto;
  transform: scale(0.8);
  transform-origin: center center;
}
.button-disabled{
  opacity: 0.9;
}
</style>